<template>
  <div id="customerList">
    <el-button class="addBtn" type="success" size="mini" @click="add"
      >添加客户</el-button
    >
    <el-table :data="customers" border style="width: 100%">
      <el-table-column prop="_id" label="_id" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="insures" label="保险产品"> </el-table-column>
      <el-table-column label="销售员">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.salesman.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="update(scope.row._id)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="del(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import apis from "../../http/apis";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "salesmans"
);

export default {
  async created() {
    const { data } = await apis.customers.getCustomers();
    this.customers = data;
  },
  data() {
    return {
      customers: [
        {
          _id: "c1",
          name: "郝建",
          age: 29,
          gender: "男",
          insures: [],
          salesman: {
            _id: "s1",
            name: "马冬梅",
          },
        },
      ],
    };
  },
  methods: {
    ...mapActions([
      "getSalesmansDeleteById",
      "receiveSalesmanById",
      "modifySalesmansById",
    ]),
    //跳转到更新页面
    update(val) {
      this.$router.push({
        path: "/System/CustomerUpdate",
        query: { _id: val },
      });
    },
    //添加客户
    add() {
      this.$router.push("/System/CustomerAdd");
    },
    //删除客户
    async del(_id) {
      const { data } = await apis.customers.getCustomerById({ _id });
      const customer = data[0];

      //判断此客户是否还有保险订单，若有则无法删除
      if (!customer.ordersId.length) {
        //删除客户
        apis.customers.deleteCustomerById({ _id });

        //重新获取客户数据，更新页面
        const { data } = await apis.customers.getCustomers();
        this.customers = data;

        //在对应的销售中删除此客户
        const salesman = customer.salesman;
        const index = salesman.customerId.indexOf(customer._id);
        salesman.customerId.splice(index, 1);
        this.modifySalesmansById(salesman);

        alert("删除成功");
        const { datas } = await apis.customers.getCustomers();
        this.customers = datas;
      } else {
        alert("该客户还有保险");
      }
    },
  },
};
</script>

<style>
#customerList {
  text-align: left;
}
#customerList > .addBtn {
  margin-bottom: 15px;
  background-color: orange;
  border: 0px;
}

#customerList .el-table .td,
#customerList .el-table .th {
  text-align: center !important;
}
</style>